import { useState } from 'react'
import { relative } from '../utils/dayjs'
import { Button, Icon, Popup, NavBar, Cell, Field, Toast } from 'react-vant'
import { addCommentsLike, deleteCommentsLike } from '../api/comment'
import styles from '../css/comment-item.module.css'
import CommentList from './comment-list'
import { addComments } from '../api/comment'
const Item = (props) => {
    const { aut_photo, aut_name, content, pubdate, reply_count, is_liking, like_count, com_id } = props.data
    const [count, setCount] = useState(like_count)
    const [liking, setLiking] = useState(like_count)
    const [showPopup, setShowPopup] = useState(false);
    const [showReplayPopup, setShowReplayPopup] = useState(false);
    const [message, setMessage] = useState()
    const [item, setItem] = useState({})
    const [is, setIs] = useState(false)
    const onclick = async () => {
        if (liking) {
            await deleteCommentsLike(com_id)
            setLiking(false)
            setCount(v => v - 1)
        } else {
            await addCommentsLike(com_id)
            setLiking(true)
            setCount(v => v + 1)
        }
    }
    const addComment = async () => {
        try {
            const { data } = await addComments({
                target: com_id,
                content: message,
                art_id: props.art_id
            })
            await Toast('发表成功')
            await setShowReplayPopup(false)
            await setMessage('')
            await setItem(data.data.new_obj)
            console.log(data.data.new_obj);

        } catch (error) {
        }
    }
    const abc = () => {
        if (props.clickOk) {
            setShowPopup(true)
        }
    }

    return (<div className={styles.item}>
        <div className={styles.left}>
            <img src={aut_photo} alt="" />
        </div>
        <div className={styles.grow}>
            <div className={styles.username}>{aut_name}</div>
            <p className={styles.content}>{content}</p>
            <div className={styles.time}><span>{relative(pubdate)}</span><button onClick={abc}>回复{reply_count}</button></div>
        </div>
        <div className={[styles.grow, styles.grow1].join(' ')}>
            {
                liking ? < Button onClick={onclick} ><Icon name="good-job" /><span className={styles.likeing}>{count > 0 ? count : ''}</span></ Button > : < Button onClick={onclick} ><Icon name="good-job-o" />{count > 0 ? count : '赞'}</ Button >
            }
        </div>
        {props.clickOk ?
            <div>< Popup visible={showReplayPopup} position="bottom" onClose={setShowReplayPopup} style={{ height: '20%' }} >
                <div className={styles.writeComment}>
                    <Field
                        value={message}
                        autosize={{ maxHeight: 72, minHeight: 50 }}
                        type="textarea"
                        maxlength="50"
                        placeholder="请输入评论"
                        showWordLimit
                        onChange={setMessage}
                    />
                    <Button onClick={addComment} disabled={!message}>发表</Button>
                </div>
            </Popup>

                <Popup
                    visible={showPopup}
                    position="bottom"
                    style={{ height: '100%' }}
                    onClose={() => setShowPopup(false)}
                >
                    <NavBar
                        title={`共有${reply_count}条回复`}
                        leftArrow
                        onClickLeft={() => setShowPopup(false)}
                    />
                    <Item data={props.data} clickOk={false} />
                    <Cell title="全部评论" />
                    {/* 评论列表 */}
                    < CommentList art_id={com_id} item={item} type="c" clickOk={false} />
                    <div className={styles.bottom}>
                        <Button type="primary" round onClick={setShowReplayPopup}>写评论</Button>
                    </div>
                </Popup></div>
            : ''
        }
    </div >)
}
export default Item